<template>
  <div v-if="total">
    <label>
      <input type="checkbox" v-model="isAll">
    </label>
    <span>
      <span>已完成{{ doneCount }}</span>/全部{{ total }}
      <button @click="clearAllSuccess">清除已完成</button>
    </span>
  </div>
</template>
<script>
export default {
  name: 'MyFlout',
  props: ['todos','checkAll','clearAllSuccess'],
  computed: {
    doneCount() {
      return this.todos.filter(todo => todo.done).length
    },
    total() {
      return this.todos.length
    },
    isAll: {
      get() {
        return this.doneCount === this.total
      },
      set(value) {
        this.checkAll(value)
      }
    }
  }
}
</script>